<template>
	<my-header navType="list"></my-header>
	<view class="container">
        <!-- 轮播 -->
		<view class="banner">
            
			<!-- <swiper class="swiper" circular :indicator-dots="indicatorDots"
					:autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item,index) in bannerList" :key="index" @click="lunboClick(item)">
					<image :src="item.pic" style="width: 100%;height: 210px;" mode=""></image>
				</swiper-item>
			</swiper> -->

            <up-swiper :list="bannerList" @click="lunboClick" circular="false" height="210px" keyName="pic" @change="changelu" style="height: 200px;">
                <template #indicator>
                    <view class="indicator">
                        <view class="indicator__dot" v-for="(item, index) in bannerList" :key="index" 
                        :class="[index == current && 'indicator__dot--active']">
                    </view>
                </view>
                </template>
            </up-swiper>
        </view>
		<view class="container-title">
			<view class="titleLeft">学习专区</view>
			<view class="titleRight" @click="studyPage">查看更多</view>
		</view>
		<view class="carousel">
            <my-scroll :goodsList="studyList" @clickFn="clickScroll"></my-scroll>
        </view>
		<view class="study-title">
			<view class="titleLeft">精彩文章</view>
			<view class="titleRight" @click="moreText">查看更多</view>
		</view>
		<view class="study-list">
            <my-page-list :newsList="newsList" @clickPage="pageItem"></my-page-list>
        </view>
	</view>
    <my-action-sheet v-if="showActionSheetModel"></my-action-sheet>
    <my-sticky-button v-if="userStore.userInfo?.uid && !userStore.userInfo?.is_user_channel" />
</template>

<script setup lang="ts">
	import { ref,defineEmits } from 'vue'
	import { useUserStore } from '@/stores'
	import { onShow, onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
	import { getBannerAPI, getStudyBannerAPI } from '@/api/bannerList'
    import { getNewsListAPI } from '@/api/news'
    import dayjs from 'dayjs';
	const userStore = useUserStore()
	const indicatorDots = ref<any>(true)
    const autoplay = ref<any>(true)
    const interval = ref<any>(2000)
    const duration = ref<any>(500)
	const newsList = ref<any>([])
    const bannerList = ref<any>([])
    const studyList = ref<any>([])
    const emits = defineEmits(['clickFn'])
    const showActionSheetModel = ref(false)
    const current = <any>ref(0)

    //轮播切换
    const changelu = (e:any)=>{
        current.value = e.current
    }
	// 获取轮播列表
    const getBannerList = async () =>{
        const ress: any = await getBannerAPI()
        console.log('res->',ress)
        bannerList.value = ress
    }
    const moreText = ()=>{
        uni.navigateTo({
            url:'moreText'
        })
    }
    //学习专区进入详情
    const clickScroll=(item:any)=>{
        console.log('jingcai',item)
        const detailType = getQueryParam(item.url)
        uni.navigateTo({
            url:`/pagesA/index/detail?${detailType}`
        })
    }
    //获取学习banner
    const getStudyBanner = async () =>{
        const res: any = await getStudyBannerAPI()
        // console.log('StudyRs->',res)
        studyList.value = res
    }
    //精彩学习前往详情
    const pageItem = (item:any)=>{
        console.log('page',item)
        // uni.navigateTo({
        //     url:`/pagesA/index/detail?tid=${item.id}`
        // })
    }
    //前往详情页面
    const lunboClick = (item:any) =>{
        // console.log('item',item)
        // return
        let items = bannerList.value[item]
        // console.log('item--->lunbo',items.url)
        // return
        const detailType = getQueryParam(items.url)
        // console.log('detail->',detailType,ssitem)
        uni.navigateTo({
            url:`/pagesA/index/detail?${detailType}`
        })
    }
    //获取文章列表类型方法
    const getQueryParam =(url:any) => {
        const urlKey = url.split('?')[1]
        // console.log('urlKey->',urlKey)
        // const urlParams = new URLSearchParams(new URL(url).search);
        return urlKey;
    }
    //获取文章列表
    const getNewsList = async () =>{
        const res: any = await getNewsListAPI()
        console.log('res->-',res)
        newsList.value = res
        newsList.value.forEach((element: any) => {
            element.time = dayjs(element.dataline).format('YYYY-MM-DD')
            const srcMatch = element.avatar.match(/<img.*?src=["'](.*?)["']/);
            if (srcMatch && srcMatch[1]) {
                element.avatar = srcMatch[1]
            }
        })
    }
    uni.$on('closeActionSheet',function(){
        showActionSheetModel.value = false
        // loginStore.TokenStatus
        userStore.clearUserInfo()
        uni.showTabBar({ animation: false })
    })
    const studyPage = () =>{
        uni.navigateTo({
            url:'studyIndex'
        })   
    }
    //下拉刷新
    onPullDownRefresh(()=>{
        getBannerList()
        getNewsList()
        getStudyBanner()
    })
    onLoad(() => {
        // if(userStore.userInfo?.uid){
            showActionSheetModel.value = userStore.userInfo?.uid ? false : true
            // uni.hideTabBar({ animation: false });
            if(showActionSheetModel.value){
                uni.hideTabBar({ animation:false })
            }
        // }
        getBannerList()
        getNewsList()
        getStudyBanner()
    })
</script>

<style lang="scss">
	.container{
		font-family: 'PingFang SC';
		// margin-top: 88px;
		.banner{
			width: 100%;
			height: 210px;
            .indicator{
                @include flex(row);
                justify-content: center;
                .indicator__dot {
                    height: 3.93px;
                    width: 3.93px;
                    border-radius: 100px;
                    // background-color: rgba(255, 255, 255, 0.8);
                    opacity: 0.7;
                    background-color: #fff;
                    margin: 0 5px;
                    transition: background-color 0.3s;
                }
                .indicator__dot--active {
                        opacity: 1;
                        width: 12.46px;
                        height: 3.93px;
                        border-radius: 8px;
                        background-color: #ffffff;
                        // background-color: red;
                    }
            }
			// background-color: red;
            .swiper{
                height: 210px;
                width:100%
            }
		}
		.container-title{
			// width: 100%;
			// height: 60px;
			display: flex;
			padding: 22px 20px 16px 20px;
			flex-direction: row;
			align-items: center;
			// background-color: aliceblue;
			.titleLeft{
				flex: 1;
				font-family: PingFang SC;
				font-size: 18px;
				font-weight: 500;
				line-height: 26px;
				letter-spacing: 0px;
			}
			.titleRight{
				flex: 1;
				text-align: right;
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: normal;
				line-height: 22px;
				letter-spacing: 0px;
				/* color/info/active */
				color: #166CD8;
			}
		}
		.carousel{
			width: calc(100% - 40px);
            margin: auto;
            overflow-x: hidden;
            // margin-left: 20px;
			height: 132px;
            // padding-left: 20px;
			// background-color: antiquewhite;
		}
		.study-title{
			display: flex;
			padding: 6px 20px 6px 20px;
			flex-direction: row;
			align-items: center;
			.titleLeft{
				flex: 1;
				font-family: PingFang SC;
				font-size: 18px;
				font-weight: 500;
				line-height: 26px;
				letter-spacing: 0px;
			}
			.titleRight{
				flex: 1;
				text-align: right;
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: normal;
				line-height: 22px;
				letter-spacing: 0px;
				
				/* color/info/active */
				color: #166CD8;
			}
			// background-color: blue;
		}
	}
</style>

